<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文件上传</title>
<script src="/C0-S2-Ply-demo/_js/vue.min.js"></script>
</head>
<body>
<fieldset>
<legend>王总: 程旭元你好, 帮我做一个文件上传的功能吧?</legend>
<form method="post" enctype="multipart/form-data">
	文件: <input type="file" name="file"><br>
	<button>表单提交</button>
</form>
</fieldset>

<fieldset>
<legend>王总: 旭元呀, 你的上传功能每次只能上传一个文件, 太麻烦, 能一次传多个文件吗?</legend>
<form method="post" enctype="multipart/form-data">
	文件: <input type="file" name="file" multiple="multiple"><br>
	文件: <input type="file" name="file" multiple="multiple"><br>
	文件: <input type="file" name="file" multiple="multiple"><br>
	<button>表单提交</button>
</form>
</fieldset>

<fieldset>
<legend>王总: 旭元呀, 每次上传完成, 总是跳到一个白页面显示信息, 能不能不跳转? </legend>
<form id="form1" method="post" enctype="multipart/form-data">
	文件: <input id="file1" type="file" name="file" multiple="multiple"><br>
	文件: <input id="file1" type="file" name="file" multiple="multiple"><br>
	文件: <input id="file1" type="file" name="file" multiple="multiple"><br>
	<button type="button" onclick="upload1()">AJAX提交</button>
	<script type="text/javascript">
		function post(url, param, callback){
			var xhr = new XMLHttpRequest();
			xhr.onreadystatechange = function(){
				if(xhr.readyState==4 && xhr.status==200){
					callback(xhr.responseText);
				}
			}
			xhr.open("POST", url);
			if(! param instanceof FormData){
				xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
			}
			xhr.send(param);
		}
		function upload1(){
			var url = "http://"+location.hostname+":1112/exa/file/upload";
			var fd = new FormData(form1);
			post(url, fd, function(data){
				data = JSON.parse(data);
				var msg = data.msg;
				if(data.data){
					var s = data.data.join("\r\n");
					msg += "上传文件列表: \r\n" + s;
				}
				alert(msg);
			});
			/* axios.post(url,fd).then(res=>{
				var msg = res.data.msg;
				if(res.data.data){
					var s = res.data.data.join("\r\n");
					msg += "上传文件列表: \r\n" + s;
				}
				alert(msg);
			}); */
		}
	</script>
</form>
</fieldset>

<fieldset>
<legend>王总: 旭元呀, 我想让会员可以上传自己的头像, 有没有法子呀? </legend>
<form id="form2" method="post" enctype="multipart/form-data">
	<img alt="上传头像" src="../../_images/头像.jpg" height="200px" id=head><br>
	文件: <input id="file1" type="file" name="file"><br>
	<button type="button" onclick="upload2()">上传头像</button>
	<script type="text/javascript">
		function upload2(){
			var url = "http://"+location.hostname+":1112/exa/file/upload";
			var fd = new FormData(form2);
			post(url,fd,function(data){
				data = JSON.parse(data)
				if(data.code && data.data){
					head.src = data.data[0];
				}
				alert(data.msg);
			})
			
			/* axios.post(url,fd).then(res=>{
				if(res.data.code && res.data.data){
					head.src = res.data.data[0];
				}
				alert(res.data.msg);
			}); */
		}
	</script>
</form>
</fieldset>
<script type="text/javascript">
document.querySelectorAll("form").forEach(f=>{
	f.action = "http://"+location.hostname+":1112/exa/file/upload";
});
</script>
</body>
</html>